<script setup>
import FilterBar from '@/components/FilterBar.vue'
import { onMounted, inject, reactive, nextTick } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  list: [],
  selectValue: 'day',
})

onMounted(() => {
  getChartData()
})

function getChartData() {
  $http
    .get('/screen/report/home-address', { params: { scope: dataObj?.selectValue } })
    .then(res => {
      const { data = [] } = res || {}

      dataObj.list = data || []
    })
    .then(nextTick)
    .then(() => {
      autoScroll('table_returntown_populationdata')
    })
}

// 列表滚动方法
function autoScroll(id) {
  const el = document.getElementById(id)
  const elHeight = el.offsetHeight
  const sHeight = el.scrollHeight

  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++
    } else {
      el.scrollTop = 0
    }
  }, 100)
}

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()
}
</script>

<template>
  <div class="populationDataBox">
    <div class="title">返乡人员居住地分析</div>

    <FilterBar class="filterBox" :selectValue="dataObj.selectValue" @change="change" />

    <div class="tableBox">
      <div class="line">
        <div style="flex: 0.5">序号</div>
        <div style="flex: 0.5">乡镇名称</div>
        <div style="flex: 0.8">返乡人数</div>
        <div style="flex: 1">居家隔离人数</div>
        <div style="flex: 1">集中隔离人数</div>
      </div>

      <div class="table scroll" id="table_returntown_populationdata">
        <div class="tr" v-for="(item, index) in dataObj.list" :key="index" ref="tableRef">
          <div style="flex: 0.5">{{ index + 1 }}</div>
          <div style="flex: 0.5">{{ item.address }}</div>
          <div style="flex: 0.8">{{ item.personNum }}</div>
          <div style="flex: 1">{{ item.jjgl }}</div>
          <div style="flex: 1">{{ item.jzgl }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.populationDataBox {
  margin-top: 16px;
  width: 696px;
  height: 401px;
  background-image: url('@/assets/returnTown/boxbg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filterBox {
    margin: 13px 16px 12px 16px;
  }

  .tableBox {
    flex: 1;
    padding: 0 16px 26px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .line {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      height: 20px;
      font-size: 14px;
      color: #ffffff;

      div {
        display: flex;
        justify-content: center;
      }
    }
    .table {
      flex: 1;
      width: 100%;
      overflow: hidden auto;
      margin-top: 16px;

      .tr {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 56px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;

        &:nth-child(odd) {
          background: rgba(28, 66, 164, 0.4);
        }
      }
    }
  }
}
</style>
